<template>
  <ArmyPanelLayout class="barracksLeftTwo" title="钥匙柜借取记录">
    <template v-slot:subtitle v-if="false">
      <div class="barracksLeftTwo--subtitle">
        <BtnGroupsTab :groups="btnArr" :active="btnActive" @change="tabChangeAction"></BtnGroupsTab>
      </div>
    </template>
    <BtnGroupDevideTab :tabList="tabList" :tabActive="tabActive" @change="typeChangeAction"></BtnGroupDevideTab>
    <div class="barracksLeftTwo--table" v-if="tableData.length">
      <!--
        目标：设置 el-scrollbar 滚动，但是不允许用户滚动鼠标
        1. wrap-style="overflow:hidden" 不允许鼠标滚动
        2. view-style="height: 109px;overflow: hidden;" 不允许出现滚动条
        3. :always="false" 默认不显示滚动条
        -->
      <el-scrollbar height="244px" wrap-style="overflow:hidden" view-style="height: 243px;overflow: hidden;" :always="false">
        <div class="personPanelList">
          <div class="personPanel" v-for="(item, index) in tableData" :key="index">
            <div class="personPanel--img">
              <img src="@/assets/images/armyScreen/lock.png"/>
            </div>
            <div class="personPanel--info">
              <!--柜号(lockNum)，柜子名称(lockerName)，借取状态(useStatus)，操作时间(useTime)，用户 (user)，图片(picBase64)-->
              <div class="personPanel--info__item person"><i></i>用户: {{item.user || '--'}}</div>
              <div class="personPanel--info__item name"><i></i>柜子名称: {{item.lockerName || '--'}}</div>
              <div class="personPanel--info__item date"><i></i>借取时间: {{item.useTime || '--'}}</div>
              <div class="personPanel--info__item date one-line"><i></i>归还时间: {{item.backTime || '--'}}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="empty" style="margin-top: 25%;">
      <DataEmptyTwo></DataEmptyTwo>
    </div>
  </ArmyPanelLayout>
</template>

<script>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import BtnGroupDevideTab from '@/views/armyScreen/comp/BtnGroupDevideTab.vue'
import BtnGroupsTab from '@/views/armyScreen/comp/BtnGroupsTab.vue'
import {random14} from '@/util/utils.js'
import {ElScrollbar} from 'element-plus'
import {keyUseRecordList} from '@/api/armyScreenApi.js'
import useCommonMethods from '@/mixin/useCommonMethods.js'
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import $bus from "@/util/bus";

export default {
  inject: ['screenContext'],
  components: {
    DataEmptyTwo,
    ArmyPanelLayout,
    BtnGroupDevideTab,
    BtnGroupsTab
  },
  data() {
    return {
      sid: 'chart_' + random14(),
      tabList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '1号柜',
          value: 'E'
        },
        {
          label: '2号柜',
          value: 'GB'
        },
      ],
      tabActive: '',
      btnArr: [
        {
          name: '近七天',
          value: 1
        },
        {
          name: '近一月',
          value: 2
        },
        {
          name: '近三月',
          value: 3
        },
      ],
      btnActive: 1,
      tableData: []
    }
  },
  setup() {
    const {dictByTypeService} = useCommonMethods()
    return {
      dictByTypeService
    }
  },
  async mounted() {
    // 钥匙柜列表-lockerList
    // 钥匙借取记录时间范围-keyUseTimeScope
    const {data} = await this.dictByTypeService('lockerList')
    const dictArr = data?.list || [
      // {
      //   "dictCode": 1, // 字典code
      //   "value": 1, // 字典code
      //   "label": '全部', // 	字典值
      //   "dictValue": '全部', // 	字典值
      //   "sort": 1 // 	排序
      // },
    ]
    dictArr.forEach(item => {
      item.value = item.dictCode
      item.label = item.dictValue
    })
    this.tabList = dictArr
    if (dictArr[0]) { // 需要从数据字典获取数据，如果没有类型，将无法展示
      this.tabActive = dictArr[0].dictCode
      this.keyUseRecordListService()
    }
    $bus.on('reRequest', this.keyUseRecordListService)
  },
  beforeUnmount() {
    $bus.off('reRequest', this.keyUseRecordListService)
  },
  methods: {
    // 获取颜色的样式
    getColorStr (str) {
      if (str === '已归还') {
        return 'color: #00E279;'
      } else if (str === '已借出') {
        return 'color: #EE4A45;'
      }
      return ''
    },
    formatDateStr (dateStr) {
      if (dateStr) {
        return dateStr.substring(0,10)
      } else {
        return '--'
      }
    },
    tabChangeAction(value) {
      this.btnActive = value
      this.keyUseRecordListService()
    },
    typeChangeAction(value) {
      this.tabActive = value
      this.keyUseRecordListService()
    },
    keyUseRecordListService() {
      const paramObj = {
        "lockerIndexCode": this.tabActive,
        "pageNo": 1,
        "pageSize": 20,
        "timeScope": this.btnActive // 1-最近七天，2-最近一月，3-最近三月；默认七天,示例值(1)
      }
      keyUseRecordList(paramObj).then(res => {
        this.tableData = res?.data?.list || [
          // {
          //   lockNum: '1111',  // 	锁号（视觉稿中的柜号）
          //   lockerIndexCode: '1111',  // 钥匙柜唯一标识
          //   lockerName: '1111',  // 钥匙柜名称
          //   reason: '1111',  // 动用信息
          //   useStatus: '1111',  // 借取状态
          //   useTime: '1111',  // 记录时间
          // },
        ]
      })
    },
    changeTab(tab) {
      this.tabActive = tab
      this.cameraOnOfflineBySchool()
    },
  }
}
</script>

<style lang="scss" scoped>
.barracksLeftTwo {
  width: 439px;
  height: 100%;

  &--subtitle {
    width: 200px;
    line-height: 24px;
    margin-top: 10px;
  }

  &-tabList {
    margin: 16px 0 24px 21px;
    display: flex;
    justify-content: flex-start;

    &_item {
      cursor: pointer;
      height: 24px;
      padding: 0 10px;
      line-height: 24px;
      background-image: linear-gradient(270deg, rgba(0, 97, 165, 0.58) 0%, #0059A4 100%);
      border-radius: 2px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(167, 222, 255, 0.5);
      font-weight: 400;
      margin-right: 12px;
    }

    .selected {
      background-image: linear-gradient(270deg, rgba(17, 85, 152, 0.58) 0%, #00A3FA 100%);
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #C9EBFF;
      font-weight: 600;
    }
  }

  &--table {
    width: 420px;
    margin: 0 auto;

    .personPanelList{
      width: 100%;
      animation: move 17s linear infinite normal;
      display: flex;
      flex-wrap: wrap;
      overflow-x: hidden;
      &:hover{
        animation-play-state:paused;
      }
    }
    .personPanel{
      width: 412px;
      height: 110px;
      background: rgba(21,77,160,0.20);
      display: flex;
      padding: 8px;
      margin: 0 auto;
      margin-bottom: 8px;
      &--img{
        width: 84px;
        min-width: 84px;
        height: 90px;
        margin-right: 12px;
        img{
          width: 100%;
          max-height: 90px;
        }
      }
      &--info{
        flex: 1;
        line-height: 24px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #D8F0FF;
        letter-spacing: 0;
        font-weight: 400;
        &__item{
          width: 300px;
          i{
            display: inline-block;
            content: '';
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;
            background-size: cover;
          }
          &.date{
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_时间@2x.png");
            }
          }
          &.person{
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_姓名@2x.png");
            }
          }
          &.name{
            i {
              background-image: url("@/assets/images/armyScreen/门禁记录_地址@2x.png");
            }
          }
        }
        &__addr{
          width: 300px;
          &::before{
            display: inline-block;
            content: '';
            width: 16px;
            height: 16px;
            margin-right: 2px;
            position: relative;
            top: 2px;
            background-image: url("@/assets/images/armyScreen/门禁记录_地址@2x.png");
            background-size: cover;
          }
        }
      }
    }
    @keyframes move {
      0% {
        transform: translateY(0);
      }
      100% {
        // 489px 是根据可视区域的高度定的
        transform: translateY(calc(-100% + 243px));
      }
    }
  }
}
</style>
